<template>
  <div>
    <nav-header @add="add"></nav-header>
    <nav-main :list="list" @del="del"></nav-main>
    <nav-footer :list="list" @clear="clear"></nav-footer>
  </div>
</template>
  
<script>
import NavFooter from "@/components/navFooter/NavFooter";
import NavHeader from "@/components/navHeader/NavHeader";
import NavMain from "@/components/navMain/NavMain";
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  computed,
  onMounted,
  onUnmounted,
} from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";

export default defineComponent({
  name: "Home",
  components: {
    NavFooter,
    NavHeader,
    NavMain,
  },
  setup(props, ctx) {
    // 调用这个方法获取vuex中的createStore实例

    // console.log(name.value);
    onMounted(() => {});
    // 用来清楚定时器,闭包函数,
    onUnmounted(() => {
      console.log("组件被卸载了");
    });

    // let data = reactive({});
    // 改变agg
    // function changeAge(age) {
    //   console.log(age); // 通过ref定义的变量需要通过.value访问.
    // }
    // 计算属性list
    let list = computed(() => {
      return store.state.list;
    });
    let store = useStore();

    let add = (val) => {
      let flag = true;
      list.value.map((item) => {
        if (item.title === val) {
          flag = false;
          alert("该任务已存在");
        }
      });
      if (flag) {
        store.commit("addTodo", {
          title: val,
          complete: false,
        });
      }
      // console.log(list);

      // console.log(val);
    };
    let del = (index) => {
      // console.log(index);
      store.commit("delTodo", index);
      // list.value.splice(index, 1);
    };
    let clear = (arr) => {
      store.commit("clear", arr);
    };
    // data.name = "ls";
    return {
      add,
      del,
      clear,
      list,
      // name,
      // arr,
      // obj,
      // changeAge,
    };
  },
});
</script>
  
<style scoped lang="scss">
</style>